<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font: 12px "simhei", Arial, Helvetica, sans-serif;
            color: #666;
        }
        img{
            cursor: pointer;
        }
        body>div{
            width: 198px;
            height: 233px;
            background-color: #E8E8E8;
            box-sizing: border-box;

            text-align: center;
        }
        .title_p{
            color: #000;
            margin:0;
        }
       .price_p{
            font-weight: bold;
            color: #0AA1ED;
            margin:6px 0;
       }
       a{
           /*display: inline-block;*/
           /*如果元素设置为块级元素, 则不受上级元素text-align:center影响
            元素的显示位置默认靠左显示,如果需要让元素居中,可以通过外边距的方式让块级元素居中*/
           display: block;
           /*块级元素居中的写法*/
           margin: 0 auto;
           width: 100px;
           height: 24px;
           background-color: #0AA1ED;
           border-radius: 3px;

           line-height: 24px;
           text-decoration: none;
           color: #FFFFFF;
       }
    </style>
</head>
<body>
    <div>
        <img src="http://doc.vrd.net.cn/tstore_v1/images/itemCat/study_computer_img3.png" alt="">
        <p class="title_p">戴尔(DELL)XPS13-9360-R1609 13.3英寸微边框笔记本电脑</p>
        <p class="price_p">￥4600.00</p>
        <a href="">查看详情</a>
    </div>
</body>
</html>